import React from 'react';
import _ from 'underscore';

import dispatcher from 'lib/dispatcher';
import Loading from 'lib/components/Loading.jsx';

import DimensionContainer from './DimensionContainer.jsx';

export default class MainView extends Loading {
  changeDimensionHandler(index, item) {
    dispatcher.dispatch({
      $type: 'change_dimension',
      index,
      item: item
    })
  } // changeDimensionHandler

  completeSettingHandler(index, settings) {
    dispatcher.dispatch({
      $type: 'complete_number_setting',
      index,
      settings
    })
  } // completeSettingHandler

  addDimensionHandler() {
    let newItems = _.chain(this.list)
                    .map(p => p.options)
                    .flatten(true)
                    .filter(p => !p.disabled)
                    .value();
    if (!newItems.length) {
      return;
    }

    let newItem = _.find(newItems, p => p.value !== '-1');
    if (!newItem) {
      return;
    }

    dispatcher.dispatch({
      $type: 'add_dimension',
      newItem
    });
  } // addDimensionHandler

  removeDimensionHandler(index) {
    dispatcher.dispatch({
      $type: 'remove_dimension',
      index
    });
  } // removeDimensionHandler

  renderBody(data) {
    this.list = data.toJS();
    return (
      <div className="auto-row">
        <div className="left">查看维度</div>
        <div className="main" style={{ marginBottom: '-11px', minHeight: 40 }}>
        {
          this.props.viewDimensions.map((item, index) => (
            <DimensionContainer
              key={ index }
              { ...item }
              options={ this.list }
              onRemoving={ this.removeDimensionHandler.bind(this, index) }
              onComplete={ this.completeSettingHandler.bind(this, index) }
              onChanged={ this.changeDimensionHandler.bind(this, index) }
              canRemove={ this.props.viewDimensions.length !== 1 } />
          ))
        }
        </div>
        <div className="line-add">
          <div className="btn-container" onClick={ this.addDimensionHandler.bind(this) }>
            <i className="iconfont btn-add">&#xe6bd;</i>
          </div>
          <div className="line-container">
            <div className="line"></div>
          </div>
        </div>
      </div>
    );
  } // renderBody
}

MainView.defaultProps = {
}
